<template>
    <el-main>
        <el-card>
            <template #header>
                <div>
                  <span>课程列表</span>
                </div>
            </template>
        <div class="body">
            <el-table :data="tabledata" >
                <el-table-column prop="xh" label="序号" width="200px"></el-table-column>
                <el-table-column prop="kcmc" label="课程名称" width="200px"></el-table-column>
                <el-table-column prop="cjsj" label="创建时间" width="200px"></el-table-column>
                <el-table-column prop="kjzt" label="可见状态" width="200px">
                    <template v-slot="scope">
                        <el-switch
                            v-model="scope.row.kjzt"
                            @change="changeSwitch(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button @click="edit(scope.row)"><el-icon><EditPen /></el-icon></el-button>
                        <el-button @click="resourcemanagement(scope.row)"><el-icon><Files /></el-icon></el-button>
                        <el-button @click="resourceOrchestration(scope.row)"><el-icon><Monitor /></el-icon></el-button>
                        <el-button @click="startaclass(scope.row)"><el-icon><School /></el-icon></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <p class="message" v-if="message != ''">正在{{message}}</p>
        </div>

        </el-card>
    </el-main>
</template>

<script>
import {EditPen,Files,Monitor,School} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            scope:[{

            }],
            message:'',
            tabledata: [{
                xh: '1',
                kcmc: 'Java程序设计',
                cjsj: '2020-12-12',
                kjzt: false
            },
            {
                xh: '2',
                kcmc: 'MySQL数据库技术',
                cjsj: '2021-12-11',
                kjzt: true
            },
            {
                xh: '3',
                kcmc: 'Web前端开发基础',
                cjsj: '2021-12-11',
                kjzt: true
            },
            {
                xh: '4',
                kcmc: 'Web前端项目开发实战',
                cjsj: '2021-12-11',
                kjzt: true
            }]
        }
    },
    components: {
        EditPen,
        Files,
        Monitor,
        School,
    },
  methods: {
    changeSwitch(val) {
      console.log(val);
      if (val.kjzt === true) {
        this.$message.success(val.kcmc + "现在是可见的")
      } else {
        this.$message.warning(val.kcmc + "现在是不可见的")
      }
    },
    edit(val) {
      this.message = val.kcmc + "编辑"
    },
    resourcemanagement(val) {
      this.message = val.kcmc + "资源管理"
    },
    resourceOrchestration(val) {
      this.message = val.kcmc + "资源编排"
    },
    startaclass(val) {
      this.message = val.kcmc + "开课"
    }
  }
}


</script>

<style>
.container{
    background-color: white;
}
.title {
  padding: 10px 10px;
  text-align: left;
  border-bottom: 1px solid rgb(230, 227, 227);
}
.body {
  margin-top: 25px;
  height: 45%;
}
.message{
  text-align: center;
}
</style>